<template>
	<view class="contentEdit" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="添加内容" :isAppBtn="false"></HeadCustom>
		<view class="content_box">
			<view class="content_detail" v-for="(item, index) in dataTypeList" :key="index">
				<!-- <u--textarea class="mar10" v-if="item.type == 'text'" v-model="item.segContent" placeholder="请输入内容"></u--textarea> -->
				<uni-easyinput :inputBorder="false" class="mar10" type="textarea" v-if="item.type == 'text'" v-model="item.segContent" placeholder="请输入内容"></uni-easyinput>

				<image class="mar10 img_box" v-else-if="item.type == 'image'" :src="item.segContent" mode="widthFix"></image>
				<video class="mar10" :show-fullscreen-btn="false" v-else :src="item.segContent" :poster="item.mpc_url"></video>
				<image @tap="delImg(index)" class="img_del" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/close.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="inserContent fboxRow Xcenter Ycenter" @tap="openSheet">
			<!-- <image src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/addCont13.png" mode="aspectFill"></image> -->
			<text>+</text>
			<text>插入文本 / 图片 / 视频</text>
			<!-- <text>图片</text>
			<text>视频</text> -->
		</view>

		<u-action-sheet
			cancelText="取消"
			@select="selectSheet"
			@close="closeSheet"
			:closeOnClickOverlay="true"
			:round="10"
			:closeOnClickAction="true"
			:actions="dataList"
			:show="show"
		></u-action-sheet>
		<BottomBtn ref="bottomBtnRef" title="确定" @btnClick="goNextPage"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { fileUploadAnon, fileVideoUploadAnon, fileAnonoUploadMpc } from '@/api/index.js';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			show: false,
			dataList: [{ name: '插入文本', value: 'text' }, { name: '插入图片', value: 'image' }, { name: '插入视频', value: 'video' }],
			dataTypeList: []
		};
	},
	onLoad() {
		const obj = getApp().globalData.createBwqDetail;
		if (obj.content && obj.content.length != 0) {
			this.dataTypeList = obj.content;
		} else {
			this.dataTypeList.push({
				type: 'text',
				segContent: ''
			});
		}
	},
	mounted() {
		// #ifdef H5
			window.appFileCallback = this.appFileCallback;
		// #endif
	},
	methods: {
		// 打开选择框
		openSheet() {
			this.show = true;
		},
		delImg(id) {
			if (this.dataTypeList.length == 1) {
				uni.showToast({
					title: '最后一个不能删除',
					icon: 'none'
				});
				return;
			}
			this.dataTypeList.splice(id, 1);
		},
		// 选中数据
		selectSheet(data) {
			if (data.value == 'text') {
				const obj = {
					type: data.value,
					segContent: ''
				};
				this.dataTypeList.push(obj);
			} else if (data.value == 'image') {
				this.slectImg();
			} else {
				// 视频
				this.chooseVideo();
			}
		},
		// 关闭弹框
		closeSheet() {
			this.show = false;
		},
		// 确定按钮
		goNextPage() {
			let flag = false;
			this.dataTypeList.find(item => {
				if (item.type == 'text' && !item.segContent) {
					uni.showToast({
						icon: 'none',
						title: '内容不能为空'
					});
					flag = true;
					return true;
				}
			});
			if (flag) {
				return;
			}
			const contentArr = getApp().globalData.createBwqDetail;
			contentArr.content = this.dataTypeList;
			console.log('数据', this.dataTypeList);
			uni.navigateBack({
				delta: 1 //返回层数，2则上上页
			});
		},
		// 上传视频
		async chooseVideo() {
			let u = navigator.userAgent;
			if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
				const data = { type: 'fileUpload', action: 'contentVideo' };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler  ', '返回');
				});
			} else {
				const data = { type: 'fileUpload', action: 'contentVideo' };
				let that = this;
				this.$bridge.callHandler('recruitHandler', data, res => {
					console.log('recruitHandler  ', '返回');
					that.appFileCallback(res);
				});
				return;
				// uploadFile 存储需要上传的文件
				let uploadFile = '';
				// 1.选择要上传的视频
				await uni.chooseFile({
					count: 1,
					// maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					extension: ['.mp4', '.mov', '.m4v', '.avi', '.3gp', '.wmv', '.mkv', '.webm'],
					type: 'video',
					// sourceType: ['album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					success: async function(res) {
						uploadFile = res.tempFiles;
						uploadFile.url = res.tempFilePaths[0];
						uploadFile.path = res.tempFilePaths[0];
						if (uploadFile[0].size > 50 * 1024 * 1024) {
							uni.showToast({
								title: '视频大小不能超过50M',
								icon: 'none'
							});
							return;
						}
						const videoType = ['video/mp4', 'video/quicktime', 'video/m4v', 'video/avi', 'video/3gpp', 'video/x-ms-wmv', 'video/x-matroska', 'video/webm'];
						if (!videoType.includes(uploadFile[0].type)) {
							uni.showToast({
								title: '上传视频类型不符合',
								icon: 'none'
							});
							return;
						}
						uni.showLoading({
							mask: true,
							title: '上传中...'
						});
						await fileAnonoUploadMpc(uploadFile)
							.then(res1 => {
								if (res1.data) {
									const obj = {
										type: 'video',
										segContent: res1.data.url,
										mpc_url: res1.data.mpc_url
									};
									that.dataTypeList.push(obj);
								}
							})
							.finally(() => {
								uni.hideLoading();
							});
					}
				});
			}
		},
		appFileCallback(res) {
			console.log('res==>', res.fileUrl, res.action);
			if (res.action == 'contentImg') {
				const obj = {
					type: 'image',
					segContent: res.fileUrl
				};
				this.dataTypeList.push(obj);
			} else if (res.action == 'contentVideo') {
				const obj = {
					type: 'video',
					segContent: res.fileUrl,
					mpc_url: res.mpc_url
				};
				this.dataTypeList.push(obj);
			}
		},
		// 图片上传
		slectImg() {
			const that = this;
			let u = navigator.userAgent;
			if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
				const data = { type: 'imgUpload', action: 'contentImg' };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler  ', '返回');
				});
			} else {
				let that = this;
				const data = { type: 'imgUpload', action: 'contentImg' };
				this.$bridge.callHandler('recruitHandler', data, res => {
					console.log('recruitHandler  ', '返回');
					that.appFileCallback(res);
				});
				return;
				uni.chooseFile({
					count: 1, //默认9
					// sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					extension: ['.png', '.jpg'],
					sourceType: ['album'], //从相册选择
					type: 'image',
					success: async function(res) {
						uni.showLoading({
							mask: true,
							title: '上传中...'
						});
						const file = res.tempFiles[0];
						file.url = file.path;
						const imgType = ['image/jpeg', 'image/png', 'image/webp', 'image/bmp'];
						if (!imgType.includes(file.type)) {
							uni.showToast({
								title: '上传图片类型不符合',
								icon: 'none'
							});
							uni.hideLoading();
							return;
						}
						await fileUploadAnon(file)
							.then(res => {
								if (res.data) {
									const obj = {
										type: 'image',
										segContent: res.data.url
									};
									that.dataTypeList.push(obj);
								}
							})
							.finally(() => {
								uni.hideLoading();
							});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	padding: 0 20rpx;
	background-color: var(--controllerBgColor) !important;
	border-radius: 12rpx;
	.uni-easyinput__content-textarea {
		height: 160rpx !important;
		font-size: 28rpx;
		.uni-textarea-placeholder {
			font-size: 24rpx !important;
			color: var(--contentFontFourColor);
		}
	}
	.uni-textarea-textarea {
		color: var(--contentFontDarkColor);
	}
}
.contentEdit {
	padding: 20rpx;
	min-height: 100vh;
	.content_box {
		padding: 20rpx;
		background-color: var(--viewBgColor);
		border-radius: 12rpx;
		.content_detail {
			position: relative;
			.img_box {
				width: 100%;
			}
			.img_del {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 30rpx;
				height: 30rpx;
				z-index: 1;
			}
			> video {
				width: 100%;
			}
			.mar10 {
				margin-bottom: 20rpx;
			}
		}
	}
	.inserContent {
		margin: 20rpx 0 60rpx 0;
		height: 108rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
		> image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
		> text {
			font-size: 32rpx;
			color: var(--contourButtonTextColor);
			margin-right: 10rpx;
		}
	}
}
</style>
